<template>
  <el-drawer
    custom-class="command-drawer"
    :append-to-body="true"
    :modal-append-to-body="false"
    :title="setDefaultNamaeTitle(cloneDeepForm)"
    :visible="drawerVisible"
    :direction="'rtl'"
    :before-close="handleClose"
    @close="handleClose"
    size="45%"
  >
    <div>
      <div v-init-screen-h="70">
        <el-row :gutter="1">
          <el-form
            style="padding: 0 10px 10px 10px"
            :ref="'form'"
            :inline="false"
            size="small"
            label-width="160px"
            :model="cloneDeepForm"
          >
            <el-card class="box-card" shadow="always">
              <div slot="header" class="clearfix">
                <span style="font-weight: 600">基础</span>
              </div>
              <el-row :gutter="20" style="margin-top: 6px; padding: 10px">
                <el-col
                  :span="formItem.colSpan"
                  :offset="0"
                  v-for="(formItem, index) in filterAttributes(
                    cloneDeepForm,
                    true
                  )"
                  :key="index"
                >
                  <el-form-item
                    v-if="
                      formItem.name !== 'clientId' || !cloneDeepForm.disabled
                    "
                    :prop="`attributes.${index}.value`"
                    :rules="rules(formItem)"
                    :label-width="formItem.defaultName ? '160px' : '0'"
                    :label="
                      formItem.defaultName ? formItem.defaultName + ':' : ''
                    "
                  >
                    <el-input-number
                      class="w100"
                      v-if="
                        formItem.type == 'inputNumber' &&
                        !cloneDeepForm.disabled
                      "
                      v-model="formItem.value"
                      :min="0"
                      :max="99999999999"
                      controls-position="right"
                      :placeholder="formItem.placeholder"
                    ></el-input-number>
                    <el-input
                      :disabled="cloneDeepForm.disabled"
                      v-if="
                        formItem.type == 'inputNumber' && cloneDeepForm.disabled
                      "
                      v-model="formItem.value"
                    ></el-input>
                    <el-input
                      :disabled="cloneDeepForm.disabled"
                      v-if="formItem.type == 'input'"
                      v-model="formItem.value"
                      clearable
                      :placeholder="
                        formItem.placeholder
                          ? formItem.placeholder
                          : '请输入' + formItem.defaultName
                      "
                    >
                      <template v-if="formItem.prepend" slot="prepend">{{
                        formItem.summary
                      }}</template></el-input
                    >
                    <el-select
                      :disabled="cloneDeepForm.disabled"
                      v-model="formItem.value"
                      :value-key="formItem.name"
                      :placeholder="'请选择' + formItem.defaultName"
                      filterable
                      size="small"
                      class="w100"
                      v-if="formItem.type == 'select'"
                    >
                      <el-option
                        v-for="item in formItem.options"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>

                    <el-switch
                      :disabled="cloneDeepForm.disabled"
                      v-if="formItem.type == 'switch'"
                      v-model="formItem.value"
                    >
                    </el-switch>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>

            <el-card
              class="box-card"
              shadow="always"
              :style="{
                marginTop: '15px',
              }"
            >
              <div slot="header" class="clearfix">
                <div style="padding-right: 10px">
                  <el-checkbox v-model="cloneDeepForm.isopen">高级</el-checkbox>
                </div>
              </div>
              <el-row
                :gutter="20"
                v-if="cloneDeepForm.isopen"
                style="margin-top: 6px; padding: 15px"
              >
                <el-col
                  :span="formItem.colSpan"
                  :offset="0"
                  v-for="(formItem, index) in filterAttributes(cloneDeepForm)"
                  :key="index"
                >
                  <el-form-item
                    :prop="`attributes.${index}.value`"
                    :label-width="formItem.defaultName ? '160px' : '0'"
                    :label="
                      formItem.defaultName ? formItem.defaultName + ':' : ''
                    "
                  >
                    <el-input
                      :disabled="cloneDeepForm.disabled"
                      v-if="formItem.type == 'input'"
                      v-model="formItem.value"
                      :placeholder="'请输入' + formItem.defaultName"
                    ></el-input>
                    <el-select
                      :disabled="cloneDeepForm.disabled"
                      v-model="formItem.value"
                      :value-key="formItem.name"
                      :placeholder="'请选择' + formItem.defaultName"
                      clearable
                      filterable
                      size="small"
                      class="w100"
                      v-if="formItem.type == 'select'"
                    >
                      <el-option
                        v-for="item in formItem.options"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>

                    <el-switch
                      :disabled="cloneDeepForm.disabled"
                      v-if="formItem.type == 'switch'"
                      v-model="formItem.value"
                    >
                    </el-switch>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>
          </el-form>
        </el-row>
      </div>
      <div class="flex-x flex-right" style="padding: 20px">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submit" v-if="!cloneDeepForm.disabled"
          >确认</el-button
        >
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["configData"]),
    commandList() {
      return this.$store.getters["tenantConfigCommand/getCommandList"]();
    },
    rules() {
      return function (formItem) {
        if (formItem.validator) {
          return [
            {
              required: formItem.required,
              message: formItem.defaultName
                ? formItem.defaultName + "不能为空"
                : formItem.name + "不能为空",
              trigger: "blur",
            },
            {
              validator: (rule, value, callback) =>
                formItem.validator
                  ? formItem.validator(rule, value, callback, this.commandList)
                  : () => {},
              trigger: "blur",
            },
          ];
        } else {
          return [
            {
              required: formItem.required,
              message: formItem.defaultName
                ? formItem.defaultName + "不能为空"
                : formItem.name + "不能为空",
              trigger: "blur",
            },
          ];
        }
      };
    },
    setDefaultNamaeTitle() {
      return function (item) {
        if (item.attributes) {
          const destinationId =
            item.attributes.find((f) => f.name == this.configData._idKey)
              ?.value || "未命名";

          return destinationId;
        } else {
          return "标题";
        }
      };
    },
    filterAttributes() {
      return function (item, flg) {
        if (this.cloneDeepForm.attributes) {
          return this.cloneDeepForm.attributes.filter(
            (f, i) => f.senior !== flg
          );
        } else {
          return [];
        }
      };
    },
  },
  props: {
    cloneDeepForm: {
      type: Object,
      default: () => {},
    },
    drawerVisible: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit("submit");
        } else {
        }
      });
    },
    handleClose() {
      this.$emit("update:drawerVisible", false);
    },
  },
};
</script>
<style lang="scss">
.command-drawer {
  .el-card__header {
    padding: 10px;
    font-weight: bold;
  }
  .el-collapse-item__header {
    height: 60px;
    line-height: 60px;
  }
  .el-col {
    padding-left: 0 !important;
  }
  .is_open {
    /* font-size: 18px; */
    color: #409eff;
    margin-bottom: 15px;
  }
}
</style>
